<template>
  <!--  -->
  <view class="walletList">
    <view class="walletList-header">
      <wallet-nav
        title="余额明细"
        :styles="{ 'padding-top': `${vuex_safeArea.top}px` }"
      />
    </view>
    <view
      class="walletList-content"
      :style="[{ 'padding-top': `${vuex_safeArea.top}px` }]"
    >
      <view class="walletList-form">
        <view class="walletList-tabs">
          <view
            v-for="item in tabs"
            :key="item.value"
            :class="currentType === item.key ? 'active' : ''"
            @tap="currentType = item.key"
            >{{ item.value }}</view
          >
        </view>
        <view class="walletList-filter" @tap="show = true"
          >筛选时间<image
            :src="getImgSrc('/user/icon_right@2x.png')"
            mode="aspectFill"
        /></view>
        <u-picker
          mode="time"
          :start-year="minYear"
          :end-year="minYear"
          v-model="show"
          @confirm="change"
          :params="params"
        ></u-picker>
      </view>
      <view class="walletList-record">
        <view class="walletList-st">
          <view class="walletList-st-item"
            >总收入：<text>{{ totalIn }}</text></view
          >
          <view class="walletList-st-item reduce"
            >总支出：<text>{{ totalOut }}</text></view
          >
        </view>
        <view class="walletList-item" v-for="items in list" :key="items.date">
          <view class="walletList-time">{{ items.date }}</view>
          <view
            v-for="(item, idx) in items.list"
            class="walletList-item-record"
            :key="idx"
          >
            <view class="walletList-item-record-title">{{
              item.typeName
            }}</view>
            <view class="walletList-item-record-order"
              >任务号：{{ item.no }}</view
            >
            <view class="walletList-item-record-time">{{
              item.createTime
            }}</view>
            <view
              class="walletList-item-record-amount"
              :style="{ color: item.fee >= 0 ? '#4E95FC' : '#EE3B32' }"
              >{{ item.fee > 0 ? "+" : "" }}{{ item.fee }}</view
            >
          </view>
        </view>
      </view>
      <!-- <u-calendar
        v-model="show"
        mode="date"
        @change="change"
        :change-year="false"
       
      >
        <view slot="tooltip">
          <view class="time-title"> 截止统计时间 </view>
        </view>
      </u-calendar> -->
    </view>
  </view>
</template>
<script>
import walletNav from "@/components/layout/nav.vue";
export default {
  name: "walletList",
  components: {
    walletNav,
  },
  data() {
    return {
      totalIn: 0,
      totalOut: 0,
      list: [],
      show: false,
      params: {
        year: true,
        month: true,
        day: false,
        hour: false,
        minute: false,
        second: false,
      },
      tabs: [],
      currentType: "",
      month: undefined,
    };
  },
  onLoad(option) {},
  onShow() {},
  watch: {
    currentType: {
      handler(newValue, oldValue) {
        this.triggerToFetch();
      },
      immediate: true,
    },
  },
  computed: {
    minYear() {
      return new Date().getFullYear();
    },
    date() {
      return `${this.minYear}-01-01`;
    },
    maxDate() {
      return new Date().toLocaleDateString().replace(/\//g, "-");
    },
  },
  methods: {
    async triggerToFetch() {
      this.$u.api
        .queryWalletList({
          month: this.month,
          type: this.currentType,
        })
        .then((res) => {
          this.tabs = res.data.type.sort((a, b) => (b.key === "" ? 1 : -1));
          this.totalIn = res.data.totalIn;
          this.totalOut = res.data.totalOut;
          this.list = res.data.list;
        });
    },
    change(e) {
      if (this.month !== e.month) {
        this.month = e.month;
        this.triggerToFetch();
      }
    },
  },
};
</script>
<style lang="scss">
.walletList {
  /deep/.u-calendar {
    background-color: #fff;
  }

  &-header {
    background-position: bottom;
    background-size: 750rpx 512rpx;

    width: 750rpx;
    height: 534rpx;
    position: relative;
    background: linear-gradient(90deg, #4aabf6, #4675f6);
    box-shadow: 0px 16rpx 30rpx 0rpx rgba(74, 169, 246, 0.2);
  }

  &-content {
    position: relative;
    margin-top: -359rpx;
  }

  &-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &-tabs {
    display: flex;
    align-items: center;
    padding: 0 43rpx;

    & > view {
      margin-right: 55rpx;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 46rpx;
      transition: all 0.3s;

      &.active {
        font-size: 40rpx;
      }
    }
  }

  &-filter {
    padding-right: 41rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 46rpx;
    image {
      margin-left: 12rpx;
      width: 24rpx;
      height: 24rpx;
    }
  }

  &-record {
    margin-top: 29rpx;
    min-height: 100vh;
    width: 750rpx;
    background: #ffffff;
    padding: 56rpx 40rpx;
    border-radius: 42rpx 42rpx 0rpx 0rpx;
  }

  &-st {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
    margin-bottom: 62rpx;

    &::after {
      content: " ";
      width: 1rpx;
      height: 31rpx;
      background-color: #b4b4b4;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    &-item {
      flex: 0 0 50%;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #282828;
      line-height: 36rpx;
      display: flex;
      align-items: flex-end;

      text {
        font-size: 40rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #ee3b32;
        line-height: 36rpx;
      }

      &.reduce {
        padding-left: 35rpx;

        text {
          color: #4e95fc;
        }
      }
    }
  }

  &-time {
    margin-bottom: 24rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #4b4b4b;
    line-height: 36rpx;
  }

  &-item {
    &-record {
      width: 670rpx;
      height: 160rpx;
      background: #f6f7fb;
      border-radius: 21rpx;
      padding: 25rpx 27rpx;
      position: relative;
      margin-bottom: 24rpx;
      box-sizing: border-box;

      &-title {
        margin-bottom: 24rpx;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #282828;
        line-height: 1;
      }

      &-order {
        margin-bottom: 15rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #b5b5b5;
        line-height: 1;
      }

      &-time {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #b5b5b5;
        line-height: 1;
      }

      &-amount {
        position: absolute;
        right: 28rpx;
        top: 67rpx;
        font-size: 38rpx;
        font-family: PingFang SC;
        font-weight: 600;
        line-height: 46rpx;
      }
    }
  }
  .time-title {
    text-align: center;
    padding: 20rpx;
  }
}
</style>
